<style lang="scss" scoped>
.dashboard {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  // 修改最上面lop图片
  background: url("../assets/img/newlogo.png") top no-repeat;
  background-size: contain;
  // background: url("../assets/img/logo.png") top no-repeat;
  & > div {
    position: absolute;
    // border: solid 1px rgba(255, 255, 255, 0.2);
  }
}

.title {
  top: 50px;
  left: 30px;
  font-size: 40px;
  color: white;
}
.bg-title {
  position: absolute;
  // top: 48px;
  // top: 38px;
  top: 34px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 464px;
  height: 26px;
  font-size: 35px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #fff;
}

.doughnut {
  position: relative;
  top: 107px;
  // left: 26px;
  left: 32px;
  width: 450px;
  height: 198px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
  .title-left {
    // position: absolute;
    // left: 0;
    // width: 369px;
    height: 16px;
    font-size: 20px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #48eaff;
    line-height: 30px;
    text-align: left;
    margin: 32px;
    padding: 0;

    .title-left li {
      // display: list-item;

      // text-align: center;
    }
  }
}

.point {
  top: 356px;
  // left: 26px;
  left: 32px;
  width: 450px;
  height: 324px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}

.line {
  // left: 26px;
  left: 32px;
  bottom: 8px;
  // top: 726px;
  width: 450px;
  height: 314px;
}
.title-box {
  left: 501px;
  width: 911px;
  margin-top: 130px;
  height: 58px;
  display: flex;
}
.title-center {
  display: flex;
  position: relative;
  // background-color: #fff;
  flex: 1;
  // margin: 3px 3px;
  // justify-content: space-between;
  font-size: 20px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  text-align: center;
  // color: #48eaff;
  color: #fff;
  // text-align: center;
  margin: 0 4px;
}
.title-center .ly-tz {
  flex: 1;
  text-align: center;
  line-height: -58px;
  // background-color: #fff;
}

.panel-hight {
  a {
    color: #48eaff;
  }
  position: relative;
  border: 6px solid transparent;
  border-width: 14px;
  border-image-source: url("../assets/img/title-hight.png");
  border-image-slice: 16;
}

// .map {
//   left: 550px;
//   top: 152px;
//   width: 850px;
//   height: 715px;
// }

.bar {
  left: 506px;
  // bottom: 34px;
  bottom: 8px;
  width: 911px;
  height: 254px;
  display: flex;
}

.bar-left {
  flex: 1;
  // background-color: #fff;
}
.bar-right {
  flex: 1;
  // background-color: red;
}
.pie-char {
  right: 27px;
  top: 107px;
  width: 450px;
  height: 208px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;

  .hj-box {
    width: 30%;
    height: 80px;
    // margin: 0 3px;
    text-align: center;
    // background-color: red;
    font-size: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .bj-img {
      width: 57px;
      height: 58px;
      background-color: #fff;
      background: url("../assets/img/组 20 拷贝.png") no-repeat 0 0;
      background-size: 57px auto;
    }
    .bj-img1 {
      width: 57px;
      height: 58px;
      background-color: #fff;
      background: url("../assets/img/you.png") no-repeat 0 0;
      background-size: 57px auto;
    }
    .bj-img2 {
      width: 57px;
      height: 58px;
      background-color: #fff;
      background: url("../assets/img/zhong.png") no-repeat 0 0;
      background-size: 57px auto;
    }
    span {
      white-space: nowrap;
      font-size: 15px;
      color: #48eaff;
    }
  }
}

.gauge {
  top: 356px;
  right: 27px;
  width: 450px;
  height: 324px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}

.double-line {
  right: 27px;
  // bottom: 34px;
  bottom: 8px;
  width: 450px;
  height: 314px;
}

// .fullscreen-button {
//   top: 20px;
//   width: 200px;
//   height: 40px;
//   font-size: 25px;
//   color: white;
//   right: 30px;
//   border-radius: 8px;
//   color: #e9d70c;
// }
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
</style>
<template>
  <div class="dashboard">
    <div class="bg-title">星云智慧园</div>
    <!-- <div class="title">Dashboard</div> -->
    <!-- <div class='fullscreen-button' @click='toggleFullscreen'>toggle fullscreen</div> -->
    <div class="doughnut panel1">
      <div class="public ">园区信息</div>
      <ul class="title-left">
        <li>园区名称：东风南方产业园</li>
        <li>园区性质：产业园区</li>
        <li>园区地址：广州花都区风神大道8号</li>
      </ul>
      <!-- <doughnut></doughnut> -->
    </div>
    <div class="point panel1">
      <div class="public ">企业分布</div>
      <!-- <point></point> -->
      <div class="block">
        <!-- <span class="demonstration">Click 指示器触发</span> -->
        <el-carousel trigger="click" indicator-position="none" :interval="5000">
          <el-carousel-item>
            <!-- <h3 class="small">{{ item }}</h3> -->
            <point></point>
          </el-carousel-item>
          <el-carousel-item>
            <qyfl></qyfl>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="line panel1">
      <div class="public ">配置设施分布</div>
      <!-- <line-chart></line-chart> -->
      <test></test>
    </div>

    <div class="title-box">
      <div
        class="panel-title title-center"
        :class="activeClass == index ? 'panel-hight' : ''"
        v-for="(item, index) in itemList"
        :key="index"
        @click="getItem(index)"
      >
        <router-link :to="item.link" class="ly-tz">{{ item.name }}</router-link>
      </div>
    </div>
    <div class="map">
      <!-- <Map></Map> -->
    </div>
    <div class="bar panel1">
      <div class="public ">人车数量统计</div>
      <!-- <bar></bar> -->
      <div class="bar-left">
        <ren></ren>
      </div>
      <div class="bar-right">
        <che></che>
      </div>
    </div>
    <div class="pie-char panel1">
      <div class="public ">环境实时监测</div>
      <div class="hj-box">
        <span class="bj-img1"></span>
        <span>温度检测：20℃</span>
      </div>
      <div class="hj-box">
        <span class="bj-img"></span>
        <span>湿度检测：60</span>
      </div>
      <div class="hj-box">
        <span class="bj-img1"></span>
        <span>风力检测：一级</span>
      </div>
      <div class="hj-box">
        <span class="bj-img1"></span>
        <span>空气检测：98</span>
      </div>
      <div class="hj-box">
        <span class="bj-img"></span>
        <span>水质检测：80</span>
      </div>
      <div class="hj-box">
        <span class="bj-img2"></span>
        <span>土壤检测：70</span>
      </div>
    </div>
    <div class="gauge panel1">
      <div class="public ">工单处理统计</div>
      <gauge></gauge>
    </div>
    <div class="double-line panel1">
      <div class="public ">告警统计</div>
      <double-line></double-line>
    </div>
  </div>
</template>

<script>
import Doughnut from "@/components/charts/Doughnut";
// import Point from "@/components/charts/Point";
import LineChart from "@/components/charts/Line";
import Map from "@/components/charts/Map";
import Bar from "@/components/charts/Bar";
import Pie from "@/components/charts/Pie";
import Gauge from "@/components/charts/Gauge";
import DoubleLine from "@/components/charts/DoubleLine";
import Ren from "@/components/charts/Ren";
import Che from "@/components/charts/Che";
import Qyfl from "@/components/charts/Zhts/Qyfl";
import Point from "@/components/charts/Zhts/Point";
import Test from "@/components/charts/Test";
export default {
  name: "Home",
  components: {
    Doughnut,
    Map,
    LineChart,
    Bar,
    Pie,
    Gauge,
    DoubleLine,
    Ren,
    Che,
    Qyfl,
    Point,
    Test,
  },
  data() {
    return {
      isFullScreen: false,
      activeClass: 0,

      itemList: [
        { name: "园区综合态势", link: "/home" },
        { name: "综合安防", link: "/Zhaf" },
        { name: "资产管理", link: "/Zcgl" },
        { name: "能耗管理", link: "/Nhgl" },
        { name: "环境监测", link: "/Hjjc" },
      ],
    };
  },
  created() {
    this.getnhglList();
  },
  methods: {
    getItem(index) {
      this.activeClass = index;
    },

    // toggleFullscreen() {
    //   if (this.isFullScreen) {
    //     this.exitFullScreen()
    //   } else {
    //     this.launchFullScreen(document.documentElement)
    //   }
    //   this.isFullScreen = !this.isFullScreen
    // },
    launchFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
    getnhglList() {
      if ("WebSocket" in window) {
        console.log("您的浏览器支持 WebSocket!"); // 打开一个 web socket

        var ws = new WebSocket("ws://172.26.190.207:30040/api/realtime/zhdp");

        ws.onopen = function() {
          // Web Socket 已连接上，使用 send() 方法发送数据
          ws.send("发送数据");
          console.log("数据发送中...");
        };

        ws.onmessage = function(evt) {
          // var received_msg = evt.data;
          // console.log(`数据已接收... ${evt.data}`);
        };

        ws.onclose = function() {
          // 关闭 websocket
          console.log("连接已关闭...");
        };
      } else {
        // 浏览器不支持 WebSocket
        console.log("您的浏览器不支持 WebSocket!");
      }
    },
  },
};
</script>
